<form class="layui-form " action="__SELF__" data-auto="true" method="post"  data-confirm="确定要取消编辑吗？">

    <div class="layui-form-item">
        <label class="layui-form-label">上级菜单</label>
        <div class="layui-input-block">
            <select name='pid' lay-ignore class="form-control input-sm" >
                <foreach name="menus" item="menu">
                    <if condition="input('pid') eq $menu.id">
                        <option selected  value='{$menu.id}'>{$menu.spl}{$menu.title}</option>
                    <else/>
                        <eq name='menu.id' value='$info.pid|default=0'>
                            <option selected  value='{$menu.id}'>{$menu.spl}{$menu.title}</option>
                            <else/>
                            <option  value='{$menu.id}'>{$menu.spl}{$menu.title}</option>
                        </eq>
                    </if>
                </foreach>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="title" value='{$info.title|default=""}' required="required" title="请输入菜单名称" placeholder="请输入菜单名称" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单链接</label>
        <div class="layui-input-block">
            <input type="text" onblur="(this.value === '') && (this.value = '#')" name="url" autocomplete="off" required="required" title="请输入菜单链接" placeholder="请输入菜单链接" value="{$info.url|default='#'}" class="layui-input typeahead">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" >
                <input placeholder="请输入或选择图标" onchange="$('#icon-preview').get(0).className = this.value" type="text" name="icon" value='{$info.icon|default=""}' class="layui-input">
            </div>
            <span class='layui-btn layui-btn-primary' style='padding:0 12px;min-width:45.2px'>
                <i id='icon-preview' style='font-size:1.2em' class='{$info.icon|default=""}'></i>
            </span>
            <button data-icon='icon' type='button' class='layui-btn layui-btn-primary'>选择图标</button>
        </div>

    </div>

    <if isset($info['id'])><input type='hidden' value='{$info.id}' name='id'/></if>

    <script>
        require(['bootstrap.typeahead'], function () {
            var subjects = JSON.parse('{$nodes|json_encode}');
            $('.typeahead').typeahead({source: subjects, items: 5});
        });
    </script>

</form>
